<template>
  <div class="tags" ref="tags"></div>
</template>

<style type="text/scss" lang="scss" scoped>
  .tags {
    width: 100%;
    height: 12rem;
    background-color: #FBFBFB;
  }
</style>

<script>
  import echarts from 'echarts/lib/echarts'
  import 'echarts-wordcloud'

  export default {
    data() {
      return {
        chart: null
      }
    },
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      }
    },
    watch: {
      data(val) {
        if (this.chart) {
          this.chart.setOption({
            series: [
              {data: val}
            ]
          })
        }
      }
    },
    mounted() {
      this.chart = echarts.init(this.$refs.tags)
      this.chart.setOption({
        series: [
          {
            type: 'wordCloud',
            shape: 'square',
            rotationRange: [0, 0],
            gridSize: 18,
            sizeRange: [22, 30],
            width: '100%',
            height: '100%',
            textStyle: {
              normal: {
                fontFamily: 'sans-serif',
                color: function () {
                  return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(',') + ')';
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#FFFFFF'
              }
            },
            data: this.data
          }
        ]
      })
    }
  }
</script>
